<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>ASR Test console</title>
	<script src="./res/audiodisplay.js"></script><style type="text/css"></style>
	<script src="./res/recorder.js"></script>
	<script src="./res/main.js"></script>
	<style>
	html { overflow: hidden; }
	body { 
		font: 14pt Arial, sans-serif; 
		background: white;
		height: 100vh;
		width: 100%;
		margin: 0 0;
	}
	canvas { 
		display: inline-block; 
		background: #202020; 
		width: 100%;
		height: 100px;
	}
	#controls {
		display: -webkit-flex;
		align-items: center;
    	display: flex;
		height: 100%;
		width: 100%;
	}
	#status {
		height: 100%;
		width: 100%;
	}
	#record {  }
	#record.recording { 
		background: red;
		background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); 
		background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); 
		background: radial-gradient(center, ellipse cover, #ff0000 0%,white 75%,white 100%,#7db9e8 100%); 
	}
	#viz {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	</style>
</head>
<body>
	<div id="viz">
		<canvas id="analyser" width="1024" height="300"></canvas>
		<canvas id="wavedisplay" width="1024" height="300"></canvas>
	</div>
	<div id="controls">
	    <textarea id="status">
Ensure you browser supports audio capturing. If you see moving columns on top, then capturing works fine.
To start recognition press mic, then speak, then press mic again when done speaking.

For more details go to https://github.com/api-ai/asr-server
For information about ASR model go to https://github.com/api-ai/api-ai-english-asr-model

Copyright © 2016 Api.ai
	    </textarea>
		<img id="record" src="./res/mic128.png" onclick="toggleRecording(this);" class="">
	</div>
	</div>


</body></html>